﻿@{
    ViewBag.Title = "Rocking with AngularJS";
}
@section scripts
{
    <link href="http://razor.servicestack.net/htmlreport.css" rel="stylesheet" />
    <script src="http://razor.servicestack.net/js/jquip.events.css.ajax.min.js"></script>
}

<script type="text/javascript">
    //var host = location.protocol + '//' + location.hostname + '/OCBizAPI';
    var host = 'https://ocbiz.apphb.com';

    var apiurl = host + '/api/rockstars';
    function RockstarsCtrl($scope) {
        //var response = Model.AsRawJson();
        var response = { "Total": 9, "Results": [{ "Id": 1, "FirstName": "Jimi", "LastName": "Hendrix", "Age": 27, "Alive": false, "Url": "/stars/dead/hendrix" }, { "Id": 2, "FirstName": "Janis", "LastName": "Joplin", "Age": 27, "Alive": false, "Url": "/stars/dead/joplin" }, { "Id": 3, "FirstName": "Kurt", "LastName": "Cobain", "Age": 27, "Alive": false, "Url": "/stars/dead/cobain" }, { "Id": 4, "FirstName": "Elvis", "LastName": "Presley", "Age": 42, "Alive": false, "Url": "/stars/dead/presley" }, { "Id": 5, "FirstName": "Michael", "LastName": "Jackson", "Age": 50, "Alive": false, "Url": "/stars/dead/jackson" }, { "Id": 6, "FirstName": "Eddie", "LastName": "Vedder", "Age": 47, "Alive": true, "Url": "/stars/alive/vedder" }, { "Id": 7, "FirstName": "Dave", "LastName": "Grohl", "Age": 43, "Alive": true, "Url": "/stars/alive/grohl" }, { "Id": 8, "FirstName": "Courtney", "LastName": "Love", "Age": 48, "Alive": true, "Url": "/stars/alive/love" }, { "Id": 9, "FirstName": "Bruce", "LastName": "Springsteen", "Age": 62, "Alive": true, "Url": "/stars/alive/springsteen"}] };

        $scope.rockstars = response.Results;

//            $http.get(apiurl).success(function (data) {
//                $scope.rockstars = data;
//            });
        //$scope.rockstars = response.Results;
        
        $scope.noOfStars = function () {
            return $scope.rockstars.length;
        }
        
        $scope.addRockstar = function() {
            var nextId = Math.max.apply(null, $.map($scope.rockstars, function(r) { return r.Id })) + 1;
            $scope.rockstars.push({
                Id: nextId,
                FirstName:$scope.FirstName,
                LastName:$scope.LastName,
                Age:$scope.Age,
                Alive:$scope.Alive,
                Url:"/stars/" + ($scope.Alive ? "alive" : "dead") + "/" + $scope.LastName.toLowerCase()
            });
            $scope.FirstName = $scope.LastName = $scope.Age = "";               
            $scope.Alive = false;
        };
        
        $scope.removeRockstar = function(id) {
            $scope.rockstars = $._filter($scope.rockstars, function(rockstar) {
                return rockstar.Id != id;
            });
        };
        
        //default values
        $scope.FirstName = "Amy";
        $scope.LastName = "Winehouse";
        $scope.Age = 27;
        $scope.Alive = false;
    }
</script>
<div ng-app ng-controller="RockstarsCtrl">

    <div id="app">
        
        <h3>
            We have {{noOfStars()}} Rockstars</h3>
        <table>
            <thead>
                <tr>
                    <th>
                        Name
                    </th>
                    <th>
                        Age
                    </th>
                    <th>
                    </th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <td colspan="3">
                        <form ng-submit="addRockstar()">
                        <div>
                            <b>
                                <label>
                                    FirstName</label></b>
                            <input ng-model="FirstName" type="text" name="FirstName" value="" /></div>
                        <div>
                            <b>
                                <label>
                                    LastName</label></b>
                            <input ng-model="LastName" type="text" name="LastName" value="" /></div>
                        <div>
                            <b>
                                <label>
                                    Age</label></b>
                            <input ng-model="Age" type="text" name="Age" value="" /></div>
                        <div>
                            <b>
                                <label>
                                    Alive</label></b>
                            <input ng-model="Alive" type="checkbox" name="Alive" value="true" /></div>
                        <p>
                            <button type="submit" ng-disabled="!FirstName || !LastName || !Age">
                                Add new Rockstar</button></p>
                        </form>
                    </td>
                </tr>
            </tfoot>
            <tbody>
                <tr ng-repeat="rockstar in rockstars">
                    <td class="alive-{{rockstar.Alive}}">
                        <a href="{{rockstar.Url}}">{{rockstar.FirstName}} {{rockstar.LastName}}</a>
                    </td>
                    <td class="alive-{{rockstar.Alive}}">
                        {{rockstar.Age}}
                    </td>
                    <td class="alive-{{rockstar.Alive}}">
                        <a ng-click="removeRockstar(rockstar.Id)">remove</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
